<template>
	<div class="home">
	<el-container>
	  <el-header class="home_head">
		  
		  <el-row :gutter="10">
		      <el-col :span="2">
		  		
		  			<div >  
		  				<img src="../assets/logo.png" style="width:65%;height: 100%;margin-top:5%"/>
		  			</div>
		  		
		  	</el-col>
		      <el-col :span="6">
				  <div style="margin-left: -5%;">
		  		<div style="margin-top: 1%;">
		  			<span style="font-size: 23px;">中国华电CHD</span>
		  		</div>
		  		<div >
		  			<span style="font-size: 14px;color: grey;">华电（北京）热电有限公司</span>
		  		</div>
				</div>
		  	</el-col>
		      <el-col :span="8">
		  		<center>
		  			<div style="margin-top: 3%;">
		  				<!--GIS设备巡检数据记录-->
		  				<span style="font-size: 25px;">报警管理 </span>
		  			</div>
		  		</center>
		  		
		  	</el-col>
		  	<el-col :span="8">
		  		<div class="head_time">
		  			<center>
		  			<p>{{nowDate}}</p>
		  			<p class="time"> {{nowTime}}</p>
		  			</center>
		  		</div>
		  	</el-col>
		  </el-row>
		  
	  </el-header>
	  <el-container>
	    <el-aside width="70px">
		<br/>
		<div >
					<!--<el-menu
					  :default-active="this.$route.path"
					  class="el-menu-vertical-demo"
					  @open="handleOpen"
					  @close="handleClose"
					  @select="itemSelectHandler"
					  :router="true"
					  background-color="#b39fa1"
					  text-color="#fff"
					  active-text-color="#FFdaa6"
					  style="height: 30%"
					  collapse
					  >
                       <el-menu-item index="/HomeForBusiness/FirstPage">
						     <i class="el-icon-paperclip" style="color:white"></i>
							 <a index="/HomeForBusiness/FirstPage">首页</a>
					   </el-menu-item>
					  <el-menu-item index="/HomeForBusiness/BusinessInformation">
						<i class="el-icon-position" style="color:white"></i>
						<a index="/HomeForBusiness/BusinessInformation">关于店家</a>
					  </el-menu-item>
                </el-menu>-->
				<el-menu default-active="1-4-1" class="el-menu-vertical-demo" :collapse=true :router="true">
				 <!--
				  <el-menu-item index="/Home/FirstPage">
				    <i class="el-icon-menu"></i>
				    <span slot="title">首页</span>					
				  </el-menu-item>
				  
				  <el-menu-item index="/Home/FirstPage_Old">
				    <i class="el-icon-menu"></i>
				    <span slot="title">首页旧</span>
				  </el-menu-item>
				  -->
				  <el-menu-item index="/Home/FirstPageE">
				    <i class="el-icon-menu"></i>
				    <span slot="title">报警统计</span>
				  </el-menu-item>
				  <el-menu-item index="/Home/FirstPage">
				    <i class="el-icon-menu"></i>
				    <span slot="title">报警统计</span>
				  </el-menu-item>
				  <!--
				  <el-menu-item index="/Home/AlarmRecord">
				    <i class="el-icon-document"></i>
				    <span slot="title">实时报警记录</span>
				  </el-menu-item>
				  -->
				  <el-menu-item index="/Home/AlarmClassification">
				    <i class="el-icon-edit-outline"></i>
				    <span slot="title">异常记录</span>
				  </el-menu-item>
				  
				  <el-menu-item index="/Home/AlarmStatistics">
				    <i class="el-icon-edit-outline"></i>
				    <span slot="title">异常记录</span>
				  </el-menu-item>
				  <el-menu-item index="/Home/Rule">
				    <i class="el-icon-document"></i>
				    <span slot="title">过滤规则</span>
				  </el-menu-item>
				  
				  
				</el-menu>

			</div>
			</el-aside>
	    <el-main>
			<router-view></router-view>
		</el-main>
	  </el-container>
	</el-container>
</div>
</template>

<script>
	export default {
		data() {
			return {
				   nowDate: "",  // 当前日期
				   nowTime: "",  // 当前时间
				   nowWeek: ""   // 当前星期
			}
		},
		created() {
			
		},
		
		mounted() { 
		  // 页面加载完后显示当前时间
		  this.dealWithTime(new Date())
		  // 定时刷新时间
		  this.timer = setInterval(()=> {
		    this.dealWithTime(new Date()) // 修改数据date
		  }, 500)
		 }, 
		 destroyed() {
		  if (this.timer) { // 注意在vue实例销毁前，清除我们的定时器
		   clearInterval(this.timer);
		  }
		  },
		methods: {
			
			setZero(a) {//设置小于10的数字在加0
				return a < 10 ? "0" + a : a;
			},
			
			dealWithTime(data) { // 获取当前时间
			   let formatDateTime;
			   let Y = data.getFullYear();
			   let M = data.getMonth() + 1;
			   let D = data.getDate();
			   let H = data.getHours();
			   let Min = data.getMinutes();
			   let S = data.getSeconds();
			   let W = data.getDay();
			   H = H < 10 ? "0" + H : H;
			   Min = Min < 10 ? "0" + Min : Min;
			   S = S < 10 ? "0" + S : S;
			   switch (W) {
			    case 0:
			     W = "日";
			     break;
			    case 1:
			     W = "一";
			     break;
			    case 2:
			     W = "二";
			     break;
			    case 3:
			     W = "三";
			     break;
			    case 4:
			     W = "四";
			     break;
			    case 5:
			     W = "五";
			     break;
			    case 6:
			     W = "六";
			     break;
			    default:
			     break;
			   }
			   this.nowDate = Y + "年" + M + "月" + D + "日 ";
			   this.nowWeek = "周" + W ; 
			   this.nowTime = H + ":" + Min + ":" + S;
			   // formatDateTime = Y + "年" + M + "月" + D + "日 " + " 周" +W + H + ":" + Min + ":" + S;
			  },
			
			itemSelectHandler(index, indexPath) {
				console.log(index);
				console.log(indexPath);
			},
			handleOpen(key, keyPath) {
				console.log(key, keyPath);
			},
			handleClose(key, keyPath) {
				console.log(key, keyPath);
			},
			

		}
	}
</script>

<style lang="less" scoped>
	
	 .el-menu-vertical-demo{
	    min-height: 600px;
	  }
	

	.home {

		.home_head {
			//flex: 3;
			width:100%;
			box-shadow: 0px 0px 5px 0px gray;
			.head_time{
				float: right;
				margin-right: 2%;
				margin-top:2%;
				
				.time{
					font-size: 14px;
					color: grey;
				}
			}

		}
		
		
		}


</style>
